<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>剪裁图像</title>
<style type="text/css">
canvas {
	border:1px solid #000;
}
</style>
<script type="text/javascript">
function Draw(){
	var canvas=document.getElementById("canvas");
	var context = canvas.getContext("2d");
	// source-over
	context.globalCompositeOperation = "source-over";
	RectArc(context);
	// lighter
	context.globalCompositeOperation = "lighter";
	context.translate(90,0);
	RectArc(context);
	// xor
	context.globalCompositeOperation = "xor";
	context.translate(-90,90);
	RectArc(context);
	// destination-over
	context.globalCompositeOperation = "destination-over";
	context.translate(90,0);
	RectArc(context);
}
// 绘制组合图形
function RectArc(context){	
	context.beginPath();
	context.rect(10,10,50,50);
	context.fillStyle = "#F90";
	context.fill();
	context.beginPath();
	context.arc(60,60,30,0,Math.PI*2,true);
	context.fillStyle = "#0f0";
	context.fill();
}
window.addEventListener("load",Draw,true);
</script>
</head>
<body>
<canvas id="canvas" width="400" height="300">你的浏览器不支持该功能！</canvas>
</body>
</html>
